<template>
  <z-paging :empty-view-error-text="`对不起,页面走丢了\n请刷新试试`" :empty-view-text="`暂无订单`"
    :show-empty-view-reload-when-error="false" ref="paging" v-model="list" @query="queryList" :fixed="true" width="100%"
    height="100%">
    <image src="@/static/images/img/bg.png" class="w-[100%] absolute top-0 h-[892rpx] z-[-1]" />
    <view :style="{ paddingTop: menuButtonInfoBottom + 'px' }" class="px-[32rpx]"  >
      <view class="flex align-center justify-between">
        <view style="border: #000000 solid 2rpx;"   class="w-[500rpx] h-[76rpx] rounded-[8rpx] bg-[#FFFFFF] flex justify-between">
          <view class="flex items-center  pl-[24rpx] ">
            <view class="font-[500] text-[28rpx] font-[#000000] leading-[40rpx] text-left ">全国
            </view>
            <image src="@/static/images/img/xb_1.png" class="w-[40rpx] h-[40rpx] mr-[8rpx] "></image>
            <view class="">
              <input class="w-[100rpx] h-[40rpx] " type="text" placeholder="请输入" @focus="push('/pages_qc/pf_search/index')"
                placeholder-style="color:#999999;font-size:24rpx;font-weight:400;font-family:PingFangSC;" />
            </view>
          </view>

          <view class="w-[132rpx] h-[60rpx] pt-[6rpx] mr-[8rpx]" @click="push('/pages_qc/pf_search/index')">
            <up-button text="搜索" :customStyle="{
              width: '132rpx',
              height: '60rpx',
              color: '#000000',
              borderRadius: '10rpx',
              fontSize: '28rpx',
              fontWeight: '500',
              fontFamily: 'PingFangSC',
              background: 'linear-gradient( 98deg, #FFF8DD 0%, #FFD856 100%)',
              border: '0'

            }"></up-button>
          </view>
        </view>
      </view>
    </view>

    <view class="px-[32rpx] mt-[24rpx]">
      <view class="relative ">
        <image src="@/static/images/img/矩形.png" class="w-[100%] h-[208rpx] absolute top-0" />
        <view class="px-[30rpx] py-[36rpx] relative w-[100%]">
          <image src="@/static/images/img/sc_top_text_1.png" class="w-[358rpx] h-[34rpx] " />
          <view class="mt-[14rpx] text-[20rpx] text-[#fff] z-[10]">
            <text class="z-[10] text-[20rpx]">可上门看车 精准实时 抖音微信快手等全媒体高质量用户</text>
          </view>
          <view class="mt-[24rpx] z-[10] w-[100%] h-[120rpx] bg flex flex-col items-center  pt-[18rpx]">
            <view class="text-[24rpx] mb-[10rpx] text-[#fff] font-[500]">截止今日车主收车成功的有</view>
            <view class="w-[288rpx] flex justify-between items-center">
              <view v-for="item in number_val" class="w-[32rpx] relative">
                <view class="w-[100%] h-[17rpx] bg-[#fff] rounded-[4rpx]">

                </view>
                <view class="w-[100%] mt-[2rpx] h-[17rpx] bg-[#fff] rounded-[4rpx]">

                </view>
                <view
                  class="text-[#FFB514] text-[28rpx] h-[34rpx] w-[100%] flex justify-center items-center absolute top-0 font-[500]">
                  {{ item }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class=" w-[100%] flex items-center bg-[#fff] p-[8rpx] rounded-[12rpx]">
        <image src="@/static/images/icon/sc_lb.png" class="w-[41rpx] h-[43rpx] mr-[8rpx]" />
        <text class="text-[#C49906] text-[24rpx]">四川省成都市 陈先生 购买全媒体意向线索包 3分钟前</text>
      </view>
    </view>
    <view>
      <up-tabs :list="tabs" :scrollable="false" @change="handleTabsChange" :activeStyle="{
        color: '#000',
        fontWeight: '600',
        fontSize: '28rpx',
      }" :inactiveStyle="{
        color: '#000000',
        fontSize: '28rpx'
      }" lineWidth="36rpx" lineHeight="8rpx" lineColor="linear-gradient( 98deg, #FFF1B8 0%, #FFD856 100%)"></up-tabs>
      <!-- </up-sticky> -->
      <view class="px-[32rpx] pt-[32rpx] w-[100%]">
        <view v-for="item in list" class="mb-[24rpx]" :key="item + 'pf-card'"
          @click.stop="push(item?.informationType == 2 ?  `/pages_qc/wholesale_details/index?id=${item?.id}` : `/pages_qc/particularscar/particularscar?id=${item?.id}`)">
          <pf-card :item="item" />
        </view>
      </view>
      <view class="qwsw fixed bottom-[190rpx] right-[24rpx]" @click="showPopup">
        <image src="@/static/images/icon/jhh.png" class="w-[108rpx] h-[108rpx]" />
      </view>
    </view>

    <!-- 底部弹出菜单 -->
    <up-popup v-model:show="popupShow" mode="bottom" round="24" :maskCloseAble="true">
      <view class="popup-content">
        <view class="action-items">
          <view class="action-item" v-for="(item, index) in actionItems" :key="index" @click="handleActionClick(item)">
            <view class="action-icon-box">
              <image :src="item.icon" class="action-icon"></image>
            </view>
            <text class="action-text">{{ item.text }}</text>
          </view>
        </view>
      </view>
    </up-popup>
    <popup-login v-model="userStore.showLoginPopup" />

    <template #bottom>
      <tabBar />
    </template>
  </z-paging>
</template>
<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { whoableList } from '@/api/whoable' 
import useUserStore from '@/store/modules/user';
const userStore = useUserStore();
const menuButtonInfoBottom = ref(51)
const popupShow = ref(false) // 控制up-popup显示
const push = (url) => {
  uni.navigateTo({
    url
  })
}
// 底部弹出菜单选项
const actionItems = ref([
  {
    icon: '/static/images/icon/qcc.png',
    text: '精准求购',
    type: 'qiugou'
  },
  {
    icon: '/static/images/icon/nl.png',
    text: '长期收购',
    type: 'shougou'
  },
  {
    icon: '/static/images/icon/zze.png',
    text: '发布批发',
    type: 'pifa1'
  },
  {
    icon: '/static/images/icon/se.png',
    text: '发布询价',
    type: 'pifa2'
  }
])

// 显示弹窗
const showPopup = () => {
  popupShow.value = true
}

// 隐藏弹窗
const hidePopup = () => {
  popupShow.value = false
}

// 弹窗状态变化
const popupChange = (e) => {
  console.log('弹窗状态变化', e)
}

// 处理菜单项点击
const handleActionClick = (item) => {
  console.log('点击了', item.text)
  // 根据不同类型执行不同操作
  switch (item.type) {
    case 'qiugou':
      // 处理精准求购
      uni.navigateTo({
        url: '/pages_qc/wanttobuy/wanttobuy?informationType=0'
      });
      break;
    case 'shougou':
      // 处理长期收购
      uni.navigateTo({
        url: '/pages_qc/wanttobuy/wanttobuy?informationType=1'
      });
      break;
    case 'pifa1':
      // 处理发布批发1
      uni.navigateTo({
        url: '/pages_qc/wanttobuy/wanttobuy?informationType=2'
      });
      break;
    case 'pifa2':
      // 处理发布批发2
      uni.navigateTo({
        url: '/pages_qc/wanttobuy/wanttobuy?informationType=3'
      });
      break;
  }
  hidePopup();
}

// 筛选
const tabs = ref([{ name: '全部', value: null }, { name: '求购', value: 0 }, { name: '收购', value: 1 }, { name: '批发', value: 2 }, { name: '询价', value: 3 }])
const tabsIndex = ref(null);
const handleTabsChange = (e) => {

  tabsIndex.value = e.value;
  paging.value.reload();
  console.log('tabsIndex.value', e.index)
}
// 分页数据
const list = ref([]);
const paging = ref(null);
const queryList = async (pageNum, pageSize) => {
  try {
    const from = {
      pageNum: pageNum,
      pageSize: pageSize,
      informationType: tabsIndex.value
    };
    const { rows } = await whoableList(from);
    paging.value.complete(rows);
  } catch (e) {
    console.log('报错=>', e);
    //TODO handle the exception
    paging.value.complete(false);
  }
};
const number_val = ref([1, 2, 3, 4, 5, 6, 7, 8, 9])

 
</script>
<style scoped lang="scss">
.bg {
  background: rgba(255, 255, 255, 0.37);
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  border-radius: 32rpx 32rpx 12rpx 12rpx;
  border: 2rpx solid #FFFFFF;
  color: rgb(255, 255, 255);
}

.qwsw {
  width: 108rpx;
  height: 108rpx;
  background: linear-gradient(98deg, #FFF8DD 0%, #FFD856 100%);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
}

/* 底部弹出菜单样式 */
.popup-content {
  background-color: rgba(255, 255, 255, 0);
  border-radius: 24rpx 24rpx 0 0;
  padding: 40rpx 20rpx 20rpx;
  margin-bottom: 100rpx;
}

.action-items {
  display: flex;
  justify-content: space-around;
  padding: 20rpx;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25%;
}

.action-icon-box {
  width: 108rpx;
  height: 108rpx;
  background-color: #FFE788;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16rpx;
}

.action-icon {
  width: 108rpx;
  height: 108rpx;
}

.action-text {
  font-size: 24rpx;
  color: #333;
}
</style>